<template>
  <span type="primary"  ref="btn" v-show="support" >
    <slot>
       <a-button type="primary" >
         上传
      </a-button>
    </slot>
  </span>
 
</template>

<script>
  import { uploaderMixin, supportMixin } from '../common/mixins'

  const COMPONENT_NAME = 'uploader-btn'

  export default {
    name: COMPONENT_NAME,
    mixins: [uploaderMixin, supportMixin],
    props: {
      directory: {
        type: Boolean,
        default: false
      },
      single: {
        type: Boolean,
        default: false
      },
      attrs: {
        type: Object,
        default () {
          return {}
        }
      },
     
      accept:{
        type: String,
        default:"*"
      },
      uploadDisabled:{
        type:Boolean,
        default:false
      },
    },
    watch:{
      uploadDisabled(value){
        if(value){
          this.$refs.btn.addEventListener("click", function(event){
            event.preventDefault()
          });
        }else{
          this.$refs.btn.removeEventListener("click", function(event){
            event.preventDefault()
          });
        }
      }
    },
    mounted () {
      
      this.$nextTick(() => {
        this.attrs = Object.assign(this.attrs,{accept:this.accept})
        
        this.uploader.uploader.assignBrowse(this.$refs.btn, this.directory, !this.single, this.attrs)
      })
    }
  }
</script>

<style>
  .uploader-btn {
    display: inline-block;
    position: relative;
    padding: 4px 8px;
    font-size: 100%;
    line-height: 1.4;
    color: #666;
    border: 1px solid #666;
    cursor: pointer;
    border-radius: 2px;
    background: none;
    outline: none;
  }
  .uploader-btn:hover {
    background-color: rgba(0, 0, 0, .08);
  }
</style>
